<div id="price-list">
    <div class="full">
        <h3 class="h3-title" style="margin: 10px;">{{$t('bgMgr.priceList')}}</h3>
        <div style="padding: 0 10px;">
            <i-table border :columns="columns" :data="tableData" :height="taleHeight" :loading="loading"></i-table>
        </div>
        <Modal v-model="modal" width="300">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-create-outline"></Icon>
                <span>{{$t('monitor.edit')}}</span>
            </p>

            <Row style="margin: 10px 0">
                <i-col span="6" style="height: 100%;text-align:right;line-height:32px;">
                    {{$t('bgMgr.level3')}} :
                </i-col>
                <i-col span="16">
                    <input-number :max="10000" :min="0" v-model.trim.number="bonusleveladd3" style="width: 100%;"></input-number>
                </i-col>
            </Row>
            <Row style="margin: 10px 0">
                <i-col span="6" style="height: 100%;text-align:right;line-height:32px;">
                    {{$t('bgMgr.level2')}} :
                </i-col>
                <i-col span="16">
                    <input-number :max="10000" :min="0" v-model.trim.number="bonusleveladd2" style="width: 100%;"></input-number>
                </i-col>
            </Row>
            <Row style="margin: 10px 0">
                <i-col span="6" style="height: 100%;text-align:right;line-height:32px;">
                    {{$t('bgMgr.level1')}} :
                </i-col>
                <i-col span="16">
                    <input-number :max="10000" :min="0" v-model.trim.number="bonusleveladd1" style="width: 100%;"></input-number>
                </i-col>
            </Row>
            <div slot="footer">
                <i-button type="primary" style="width: 100%" @click="handleEdit">{{$t('header.submit')}}</i-button>
            </div>
        </Modal>
    </div>
    <script>
        vueInstanse = new Vue({
            el: "#price-list",
            i18n: utils.getI18n(),
            data: {
                loading: true,
                modal: false,
                taleHeight: 300,
                columns: [{
                    title: vRoot.$t('user.devType'),
                    key: 'typename',
                }, {
                    title: vRoot.$t('customer.remark'),
                    key: 'remark',
                }, {
                    title: vRoot.$t('bgMgr.superQuotation'),
                    key: 'createbonus',
                }, {
                    title: vRoot.$t('bgMgr.level3'),
                    key: 'bonusleveladd3',
                }, {
                    title: vRoot.$t('bgMgr.level2'),
                    key: 'bonusleveladd2',
                }, {
                    title: vRoot.$t('bgMgr.level1'),
                    key: 'bonusleveladd1',
                }, {
                    title: vRoot.$t('alarm.action'),
                    width: 100,
                    render: function(h, params) {
                        var row = params.row;
                        return h('Button', {
                            props: {
                                type: 'error',
                                size: 'small'
                            },
                            on: {
                                click: function() {
                                    editObject = row;
                                    vueInstanse.bonusleveladd1 = row.bonusleveladd1;
                                    vueInstanse.bonusleveladd2 = row.bonusleveladd2;
                                    vueInstanse.bonusleveladd3 = row.bonusleveladd3;
                                    vueInstanse.modal = true;
                                }
                            }
                        }, vRoot.$t('monitor.edit'))
                    },
                }],
                bonusleveladd1: 0,
                bonusleveladd2: 0,
                bonusleveladd3: 0,
                tableData: [],
            },
            methods: {
                handleEdit: function() {
                    var me = this;
                    var url = myUrls.setBonusQuotation();
                    var data = {
                        devicetypeid: editObject.devicetypeid,
                        bonusleveladd1: this.bonusleveladd1,
                        bonusleveladd2: this.bonusleveladd2,
                        bonusleveladd3: this.bonusleveladd3,

                    };
                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status === 0) {
                            editObject.bonusleveladd1 = me.bonusleveladd1;
                            editObject.bonusleveladd2 = me.bonusleveladd2;
                            editObject.bonusleveladd3 = me.bonusleveladd3;
                            me.modal = false;
                            me.$Message.success(me.$t('monitor.setupSucc'));
                        } else if (resp.status === 11) {
                            me.$Message.error('1星价格低于上级授权价格');
                        } else if (resp.status === 12) {
                            me.$Message.error('2星价格低于上级授权价格');
                        } else if (resp.status === 13) {
                            me.$Message.error('3星价格低于上级授权价格');
                        } else {
                            me.$Message.error(me.$t('monitor.setupFail'));
                        }
                    });
                },
                calcTableHeight: function() {
                    var wHeight = window.innerHeight;
                    this.taleHeight = wHeight - 115;
                },
                queryBonusQuotation: function() {
                    var me = this;
                    var url = myUrls.queryBonusQuotation();
                    utils.sendAjax(url, {}, function(resp) {
                        me.loading = false;
                        if (resp.records) {
                            me.tableData = resp.records;
                        }
                    }, function() {
                        me.loading = false;
                    })
                }
            },
            mounted: function() {
                var me = this;
                this.calcTableHeight();
                this.queryBonusQuotation();
                window.onresize = function() {
                    me.calcTableHeight();
                }
            }
        })
    </script>
</div>